<template>
  <div class="common-layout">
    <el-container>
      <el-header>新能源汽车维修后台管理系统</el-header>
      <el-container>
        <el-aside width="200px">
          <!-- Aside -->
          <el-row class="tac">
            <el-col :span="24">
              <el-menu :default-active="route.path" class="el-menu-vertical-demo" active-text-color="#7D2817"
                unique-opened router>
                <div v-for="item in menuList" :key="item.id">
                  <el-sub-menu :index="item.id + ''" v-if="item.child">
                    <template #title>
                      <el-icon>
                        <location />
                      </el-icon>
                      <span>{{ item.title }}</span>
                    </template>
                    <el-menu-item :index="subItem.path" v-for="subItem in item.child" :key="subItem.id">
                      {{ subItem.title }}
                    </el-menu-item>
                  </el-sub-menu>
                  <!-- 不带箭头 -->
                  <el-menu-item :index="item.path" v-else>
                    <el-icon>
                      <setting />
                    </el-icon>
                    <span>{{ item.title }}</span>
                  </el-menu-item>

                </div>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <Bread></Bread>
          <!-- Main -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from "vue-router";
import Bread from '../components/Bread.vue';
const route = useRoute()
const menuList = ref([
  { id: 1, title: '首页', path: "/index" },
  { id: 2, title: '系统管理', child: [{ id: 21, title: "账号管理", path: "/account" }, { id: 22, title: "角色管理", path: "/role" }, { id: 23, title: "权限管理", path: "/author" }] },
  { id: 3, title: '广告管理', path: "/advertisement" },
  { id: 4, title: '新闻管理', path: "/news" },
  { id: 5, title: '视频管理', path: "/video" },
  { id: 6, title: '商品管理', child: [{ id: 61, title: "分类管理", path: "/category" }, { id: 62, title: "商品列表", path: "/product" }, { id: 63, title: "设置sku", path: "/sku" }, { id: 64, title: "订单管理", path: "/productOrder" }] },
  { id: 7, title: '汽修管理', child: [{ id: 71, title: "下单", path: "/placeOrder" }, { id: 72, title: "订单管理", path: "/veReOrder" }] },
  { id: 8, title: '用户管理', child: [{ id: 81, title: "用户列表", path: "/user" }, { id: 82, title: "积分列表", path: "/pointList" }] },
  { id: 9, title: '客服咨询', child: [{ id: 91, title: "客服咨询", path: "/conversations" }] },
])
</script>

<style lang="scss" scoped>
.el-header {
  height: 60px;
  background-color: #7d2817;
  color: white;
  font-size: 22px;
  display: flex;
  align-items: center;
}

.el-container {
  width: 100%;
  height: 100%;
}

.el-aside,
.el-main {
  height: calc(100vh - 60px);
}

.el-aside {
  background-color: #eee;
}
</style>